<template>
  <div style="width: 100%;">
    <div>
      <div style="display: flex;justify-content: space-between">
        <div>
          <el-input v-model="name"
                    :disabled="showAdvanceSearchVisible"
                    @keydown.enter.native="initDemonBeast"
                    size="small"
                    style="width: 300px;margin-right: 10px"
                    prefix-icon="el-icon-search"
                    clearable
                    @clear="initDemonBeast"
                    placeholder="请输入妖兽名称进行搜索。。。"></el-input>
          <el-button icon="el-icon-search" :disabled="showAdvanceSearchVisible" type="primary" size="small" @click="initDemonBeast">搜索</el-button>
          <el-button icon="el-icon-search" type="primary" size="small" @click="showAdvanceSearchVisible = !showAdvanceSearchVisible">
            <i :class="showAdvanceSearchVisible?'fa fa-angle-double-up':'fa fa-angle-double-down'" aria-hidden="true"></i>
            高级搜索</el-button>
        </div>
      </div>
    </div>
    <transition name="slide-fade">
      <div v-show="showAdvanceSearchVisible" style="border: 1px solid #409eff;border-radius: 5px;box-sizing: border-box;padding: 5px;margin: 10px 0px">
        <el-row>
          <el-col :span="5">
            状态：<el-select v-model="status" placeholder="状态" size="mini" style="width: 100px">
            <el-option
                v-for="item in demon_beast_status"
                :key="item.id"
                :label="item.zh_name"
                :value="item.code">
            </el-option>
          </el-select>
          </el-col>
          <el-col :span="4">
            等级：<el-select v-model="demon_beast_rank" placeholder="等级" size="mini" style="width: 100px">
            <el-option
                v-for="item in demon_beast_ranks"
                :key="item.id"
                :label="item.zh_name"
                :value="item.code">
            </el-option>
          </el-select>
          </el-col>
          <el-col :span="4">
            区域：<el-select v-model="area_id" placeholder="区域" size="mini" style="width: 100px">
            <el-option
                v-for="item in area_id"
                :key="item.id"
                :label="item.zh_name"
                :value="item.code">
            </el-option>
          </el-select>
          </el-col>
          <el-col :span="4">
            血脉等级：<el-select v-model="blood_level" placeholder="血脉等级" size="mini" style="width: 100px">
            <el-option
                v-for="item in demon_beast_blood_level"
                :key="item.id"
                :label="item.zh_name"
                :value="item.code">
            </el-option>
          </el-select>
          </el-col>
          <el-col :span="5" :offset="2" align="right">
            <el-button  size="mini" @click="clearConfiguration">取消</el-button>
            <el-button @click="initDemonBeast" icon="el-icon-search" size="mini" type="primary">搜索</el-button>
          </el-col>
        </el-row>
      </div>
    </transition>

    <div style="margin-top: 5px">
      <el-table
          :data="demonBeasts"
          stripe
          border
          size="small"
          style="width: 100%"
          @selection-change="handleSelectionChange">

        <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
            :index="indexMethod"/>
        <el-table-column prop="url" label="头像" width="70">
          <template v-slot="scope">
<!--            <img :src="scope.row.url" alt="" width="40" height="40">-->
            <el-popover
                placement="top-start" trigger="hover">
              <div class="row_reserve">
                <img class="big-img" :src="scope.row.url"/>
              </div>
              <div slot="reference">
                <img class="td-img" width="40" height="40" :src="scope.row.url" />
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="妖兽名称"
            min-width="10%">
        </el-table-column>
        <el-table-column
            prop="type"
            label="妖兽种类"
            min-width="5%">
        </el-table-column>
        <el-table-column
            prop="demon_beast_rank"
            label="妖兽等级"
            min-width="5%">
        </el-table-column>
        <el-table-column
            prop="energy_value"
            label="能量值"
            min-width="10%">
        </el-table-column>
        <el-table-column
            prop="force_value"
            label="武力值"
            min-width="5%">
        </el-table-column>
        <el-table-column
            prop="blood_level"
            label="血脉等级"
            min-width="5%">
        </el-table-column>
        <el-table-column
            prop="createdate"
            label="出生日期"
            min-width="10%">
        </el-table-column>

      </el-table>
      <div style="display: flex;justify-content: space-between;width: 100%;margin-top: 5px" >
        <div>
        </div>
        <div>
          <el-pagination
              background
              @current-change="currentChange"
              @size-change="sizeChange"
              layout="sizes,prev, pager, next, jumper, ->, total"
              :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DemonBeastQuery",
  data(){
    return {
      demonBeasts:[],
      name:"",
      status:"",
      demon_beast_status:[],
      demon_beast_rank:"",
      demon_beast_ranks:[],
      area_id:"",
      blood_level:"",
      demon_beast_blood_level:[],
      id:'',
      showAdvanceSearchVisible:false,
      dialogVisible:false,
      multipleSelection:[],
      total:0,
      size:10,
      currentPage:1,
    }
  },
  computed: {

    userFace(){
      return "/webp_file_details?service_id=1&service_type=demon_beast_type&date="+this.$store.state.currentAdmin.time;
    }
  },
  methods:{

    //序号递增
    indexMethod(index) {
      let limitpage = this.size; // 每页条数
      let curpage = this.currentPage; // 当前页码
      return index + 1 + (curpage - 1) * limitpage;
    },
    //每页条数事件
    sizeChange(size){
      this.size = size;
      this.initDemonBeast();
    },
    //当前页事件
    currentChange(currentPage){
      this.currentPage = currentPage;
      this.initDemonBeast();
    },
    //多选
    handleSelectionChange(val){
      this.multipleSelection = val;
    },
    //初始化妖兽
    initDemonBeast(){
      this.$getRequest("/system/demon_beast/query?name="+this.name+"&status="+this.status+"&demon_beast_rank="+this.demon_beast_rank+"&area_id="+this.area_id+"&blood_level="+this.blood_level+"&currentPage="+this.currentPage+"&size="+this.size).then(resp=>{
        if(resp){
          //alert(JSON.stringify(resp))
          this.demonBeasts = resp.data;
          this.total = resp.total;
        }
      })
    },
    //取消
    clearConfiguration(){
      this.demon_beast_rank="";
      this.status="";
      this.blood_level="";
    },
    //常量获取 状态
    initConstantStatus(type){
      this.$getRequest("/system/constant/query?type="+type).then(resp=>{
        if(resp){
          //alert(JSON.stringify(resp))
          this.demon_beast_status=resp['obj'];
        }
      })
    },
    //血脉等级
    initConstantBloodLevel(type){
      this.$getRequest("/system/constant/query?type="+type).then(resp=>{
        if(resp){
          //alert(JSON.stringify(resp))
          this.demon_beast_blood_level=resp['obj'];
        }
      })
    },
    //自身等级
    initConstantRank(type){
      this.$getRequest("/system/constant/query?type="+type).then(resp=>{
        if(resp){
          //alert(JSON.stringify(resp))
          this.demon_beast_ranks=resp['obj'];
        }
      })
    },
  },
  mounted() {
    this.initDemonBeast();
    this.initConstantStatus("demon_beast_status");
    this.initConstantBloodLevel("demon_beast_rank");
    this.initConstantRank("demon_beast_blood_level");
  }
}
</script>

<style scoped>
/*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>